<template>
    <div class=" app_width">


        <el-card v-if="goodsinfo!=null">


            <div class="post">
                <div class="post-block">
                    <span class="title">{{ goodsinfo.goodsinfoname }}</span>
                    <span class="description">

                            </span>
                </div>

                <el-row :gutter="20">
                    <el-col :span="12">
                        <div style="text-align: center;margin-top: 10px" v-if="goodsinfo.image!=null">

                            <img
                                :src="BASE_API+goodsinfo.image"
                                style="text-align: center;width:80%;height:80%;in-height: 260px;max-height: 260px"/>
                        </div>

                    </el-col>
                    <el-col :span="12" style="padding-top: 30px">

                        <div class="text1"> 编号：{{ goodsinfo.goodsinfoid }}</div>
                        <div class="text1"> 单价：{{ goodsinfo.goodsinfoprice }}</div>
                        <div class="text1">  数量：{{ goodsinfo.countrequire }}</div>
                        <div class="text1"> 发布日期：{{ goodsinfo.createdate }}</div>
                        <el-button
                            type="primary"
                            @click="handleaddshopcart()"
                            icon="shopping-cart-full">加入购物车
                        </el-button>
                    </el-col>
                </el-row>
                <el-tabs v-model="activeName" style="margin-top: 30px">
                    <el-tab-pane label="商品详情" name="first">

                        <div class="text" v-html="goodsinfo.remark" style="min-height: 500px"></div>

                    </el-tab-pane>


                </el-tabs>
            </div>

        </el-card>


    </div>
</template>
<script name="goodsinfoDetail" setup>
import {useRoute, useRouter} from "vue-router";

 const route = useRoute();   //获取路由中的信息或参数
const router = useRouter();   //操作路由,跳转之类的
import {ElMessage, ElMessageBox} from "element-plus";  //提示框和消息


import axios_request from '../util/axios_request.js'
import {onMounted, ref, watch} from "vue";

 const goodsinfo = ref({})//商品信息
 const BASE_API = ref('http://localhost:8081/');

const activeName = ref('first')//当前的tab

onMounted(() => {
    getList()

})

watch(() => route, newdata => {
    // 如果路由参数有变化，会再次执行获取列表数据
    getList()

}, {deep: true})


function getList() {
    //获取分类
    if (route.query.id > 0) {
        //  console.log("content"+route.query.id)

        // 详情页

        axios_request.get('/web/goodsinfoDetail.action?id=' + route.query.id).then(response => {
             goodsinfo.value = response.data
         })


    }
}

function handleaddshopcart() {

    let postForm = {}
    postForm.goodsinfoid = route.query.id
    postForm.goodsinfoprice = goodsinfo.value.goodsinfoprice

    // 提交
    axios_request.post('/web/addShopcart.action', postForm).then(response => {
        ElMessage({
            message: response.msg
        })
        router.push({path: '/shopcart'})
    })


}


</script>


<style rel="stylesheet/scss" lang="scss" scoped>


.post {
    font-size: 14px;

    color: #666;

    .image {
        width: 80%;
        height: 100%;

    }


    .text {
        text-indent: 25px;
        font-size: 16px;
        line-height: 25px;
        white-space: pre-line;
    }
}

.post-block {
    text-align: center;
    border-bottom: 1px solid #d2d6de;
    padding-bottom: 15px;

    .description {
        display: block;

        padding: 2px 0;
        margin-top: 15px;
        margin-bottom: 15px;
        line-height: 30px;
    }

    .title {
        font-size: 30px;
        color: #000;
        text-align: center;
        font-weight: bold;
    }


}
</style>
